<template>
  <div class="weather-panel" v-show="visible">
    <el-row>
      <el-col :span="24">
        <div class="weather-panel-content">
          <div
            v-for="(item, index) in weatherData"
            :key="`${item.key}_${index}`"
            :class="[{ 'active-w': activeWeather === item.key }, 'weather-item']"
            @click="handleWeather(item)">
            <img :src="`twinMap/images/weather/${item.key}.png`" alt="">
            <span> {{ item.name }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="s-div">
          <el-slider v-model="timeValue" :marks="timeMarks" :min="0" :max="24"
                     :tooltip-class="'custom-tooltip'"></el-slider>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WeatherTimeControl',
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      timeValue: 12,
      timeMarks: {
        0: '00:00',
        6: '06:00',
        12: '12:00',
        18: '18:00',
        24: '24:00'
      },
      weatherData: [
        {name: "晴空", key: "sunny", value: 0},
        {name: "多云", key: "cloudy", value: 1},
        {name: "阴天", key: "overcast", value: 2},
        {name: "小雨", key: "smallRain", value: 3},
        {name: "中雨", key: "middleRain", value: 4},
        {name: "暴雨", key: "heavyRain", value: 5},
        {name: "小雪", key: "smallSnow", value: 6},
        {name: "中雪", key: "middleSnow", value: 7},
        {name: "大雪", key: "heavySnow", value: 8},
        {name: "雾天", key: "foggy", value: 9},
        {name: "雾霾", key: "smog", value: 10},
        {name: "沙尘", key: "sandDust", value: 11}
      ],
      activeWeather: ''
    };
  },
  methods: {
    handleWeather(item) {
      this.activeWeather = item.key;
      window.KCDT.switchWeather(item.value);
    },

    getCurrentTime() {
      let time = new Date();
      this.timeValue = time.getHours();
    }
  },
  watch: {
    timeValue(newTime) {
      if (newTime) {
        let time = newTime === 24 ? 0 : newTime;
        if(window.KCDT){
          window.KCDT.switchSunTime(time);
        }
      }
    }
  },
  mounted() {
    this.getCurrentTime();
  }
};
</script>
<style>
.custom-tooltip {
  > span {
    color: #180808 !important;
  }
}
</style>
<style lang="scss" scoped>

::v-deep .el-slider__marks-text {
  color: #ffffff !important;
}

.weather-panel {
  position: absolute;
  top: 63px;
  height: 114px;
  border-radius: 5px;
  padding: 10px;
  background: rgba(10, 56, 48, 0.7);
  box-sizing: border-box;
  border: 1px solid rgba(59, 214, 172, 0.6);

  .s-div {
    height: 70px;
    padding: 10px;
  }

  .weather-panel-content {
    display: flex;
    flex-direction: row;
    gap: 16px;

    .weather-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      cursor: pointer;

      > img {
        width: 22px;
        height: 22px;
      }

      > span {
        width: 24px;
        height: 12px;
        font-family: 思源黑体;
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        color: #FFFFFF;
      }
    }

    .active-w {
      > span {
        color: #009DFF;
      }
    }
  }
}


</style>
